<template>
  <div class="navHeader">
    <van-nav-bar :fixed="true" :placeholder="true">
      <template #left>
        <van-icon name="user-circle-o" size="0.6rem" />
      </template>
      <template #title>
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </template>
      <template #right>
        <van-icon name="comment-o" size="0.6rem" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { NavBar, Icon, Search } from "vant";
export default {
  name: "NavHeader",
  data() {
    return {
      value: "",
    };
  },
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-search": Search,
  },
};
</script>

<!--使用了scoped之后, 父组件的样式是不会渗透到子组件中去的, 我们如果依然要修改子组件样式的话, 使用深度作用选择器-->
<style scoped lang="less">
.navHeader {
  ::v-deep .van-nav-bar__title {
    max-width: 100%;
  }

  .van-search {
    width: 6.83rem;
  }
}
</style>
